{$this->Html->script('jquery', ['inline' => false])}
{if $dsTuVung|count gt 0}
<form class="form-horizontal" role="form" action="{Router::url('/',true)}" method="get">
<div class="bg-info hidden" id="form">	
{else}
<form class="form-horizontal" role="form" action="{Router::url('/',true)}" method="post">
<div class="bg-info show" id="form">	
{/if}
	  <div class="form-group">
	    <label for="radioGroupLoaiTu" class="col-sm-2 control-label">Loại từ: </label>
	    <div id="radioGroupLoaiTu" class="col-sm-10">
	      	{foreach $dsLoaiTu as $key => $value}
	      		<label class="radio-inline">
				  <input type="radio" name="loaiTu" value="{$key}" {$value['checked']}> {$value['value']}
				</label>
            {/foreach}
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="checkboxGroupBaiHoc" class="col-sm-2 control-label">Bài học: </label>
	    <div id="checkboxGroupBaiHoc" class="col-sm-10">
	      	{foreach $dsBaiHoc as $key => $value}
	      		<label class="checkbox-inline">
	      			<input type="checkbox" name="baiHoc[]" value="{$key}" {$value['checked']}> {$value['value']}
				</label>
            {/foreach}
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="checkboxGroupBaiHoc" class="col-sm-2 control-label">Nhóm từ: </label>
	    <div id="checkboxGroupBaiHoc" class="col-sm-10">
	    	<!-- <label class="checkbox-inline">
      			<input type="checkbox" name="" value="" checked="checked"> tất cả
			</label> -->
	      	{foreach $dsNhomTu as $key => $value}
	      		<label class="checkbox-inline">
	      			<input type="checkbox" name="nhomTu[]" value="{$key}" {$value['checked']}> {$value['value']}
				</label>
            {/foreach}
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="radioGroupLoaiKiemTra" class="col-sm-2 control-label">Loại kiểm tra: </label>
	    <div id="radioGroupLoaiKiemTra" class="col-sm-10">
	      	{foreach $dsLoaiKiemTra as $key => $value}
	      		<label class="radio-inline">
				  <input type="radio" name="loaiKiemTra" value="{$key}" {$value['checked']}> {$value['value']}
				</label>
            {/foreach}
	    </div>
	  </div>
	  
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	    	<button name="clear" type="reset" class="btn btn-danger" onclick="location.href='{Router::url('/',true)}'">Xóa</button>
	      <button type="submit" class="btn btn-default">Bắt đầu</button>
	    </div>
	  </div>	
</div>
{if $dsTuVung|count gt 0}
<div class="show" id="test">
{else}
<div class="hidden" id="test">
{/if}
    <button type="button" name="next" class="btn btn-primary">Từ kế tiếp</button>
    <button type="button" name="nghia" class="btn btn-success">Xem kết quả</button>
    (tổng cộng {$dsTuVung|count} từ) (<span name="start"></span>/<span name="end"></span>)
    <button name="ket_thuc" class="btn btn-danger" type="submit">Kết thúc</button>
    <table class="table table-bordered">
    	<tr>
    		<td><span name="text_test"></span></td> 
    	</tr>
    	<tr>
    		<td><input type="text" name="" id="dap_an" style="width: 100%; max-width: 500px"/></td>
    	</tr>
    	<tr>
    		<td><span name="text_nghia"></span></td>
    	</tr>
    </table>
</div>
</form>
<script>
    var tuVung  = [];
    var nghiaTu  = [];
    var start   = 0;
    var end     = {$dsTuVung|count};
    {foreach $dsTuVung as $key => $value}
        tuVung[{$key}] = "{$value['TuVungModel']['tu_vung']}";
        nghiaTu[{$key}] = "{$value['TuVungModel']['nghia_tu']}";
    {/foreach}
    
    function hienThiTextTest(index) {
    	if ($('input[name="loaiKiemTra"]:checked').val() == 1) { /*Nghĩa -> Từ Vựng*/    		
    		$('#test span[name="text_test"]').html(nghiaTu[index]);
    	} else { /*Từ Vựng -> Nghĩa*/
    		$('#test span[name="text_test"]').html(tuVung[index]);
    	}        
        $('#test span[name="text_nghia"]').html('');
        $('#test span[name="start"]').html(index + 1);
        $('#test span[name="end"]').html(end);
        $('#dap_an').val('').focus();
    }
    
    function hienThiTextNghia(index) {
    	if ($('input[name="loaiKiemTra"]:checked').val() == 1) { /*Nghĩa -> Từ Vựng*/
    		$('#test span[name="text_nghia"]').html(tuVung[index]);    		
    	} else { /*Từ Vựng -> Nghĩa*/
    		$('#test span[name="text_nghia"]').html(nghiaTu[index]);
    	}
    }
    
    function layTuTiepTheo() {
    	if (start < (end - 1)) {
            start += 1;
            hienThiTextTest(start);
        } else {
            alert('hoàn tất');
        }        
    }
    
    function hienThiNghia() {
    	if (start < end) {                
            hienThiTextNghia(start);
        } else {
            alert('hoàn tất');
        }
    }
    
    $(function(){
        hienThiTextTest(start);
        $('#test button[name="next"]').click(function() {
            layTuTiepTheo();
        });
        $('#test button[name="nghia"]').click(function() {
            hienThiNghia();
        });
        $(document).keydown(function(event) {
        	var keycode = (event.keyCode ? event.keyCode : event.which);
        	console.log(keycode);
        	switch(keycode) {
        		case 13:
        			event.preventDefault();
				    event.stopPropagation();
				    event.stopImmediatePropagation();
				    return false;
				    break;
				case 9:					
					layTuTiepTheo();
					return false;
					break;
        	}
        });
        $('#dap_an').keydown(function(event) {
        	var keycode = (event.keyCode ? event.keyCode : event.which);
        	switch(keycode) {
        		case 13:
        			hienThiNghia();
				    return false;
				    break;
        	}
        });
    });
    
</script>

